<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>login</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="vue.js"></script>
    <script src="jquery.js"></script>
  </head>
  <body style="background-image:url(images/bg.png);background-repeat:no-repeat;background-size:cover;">
    <div id="app">
    <div class="out">
      <div class="top">
       &nbsp;&nbsp;&nbsp;&nbsp; vue实训
      </div>
      <div style="background-image: url(images/shadow.png);background-repeat: no-repeat;margin-left: -38px;height: 20px;"></div>
      <div class="text">
          <input type="text" v-model="loginName"placeholder="请输入用户名"/>
      </div>
      <div class="text">
          <input type="password"  v-model="pwd" placeholder="请输入密码"/>
      </div>
      <div class="bottom" text-align="center" @click="login">
          登录
      </div>    
        <div class="bottom" text-align="center" @click="toregistry">
          注册
      </div>
  </div>
  </div>
  <script>
    var vm = new Vue({
      el : '#app',
      data :{
        loginName : '',
        pwd : ''
      },
      methods :{
      
        login() {
          $.ajaxSetup({
          contentType : "application/json;charset=utf-8"
        });
          var data={'loginName' : this.loginName,'pwd': this.pwd}
          $.post("http://api.tutestudio.net/api/login",JSON.stringify(data),function(res){
            if(res.code==200){
            alert("登陆成功！")
            location.href="success.html"
          }else{
            alert("登录失败")
          }
        })
      },
      toregistry(){
        location.href="registry.html"
      }
      }
    })
  </script>
</body>
</html>